<template lang="html">
	<section :class="$style.sortContent">
		<Stheader :class="$style.header">分类</Stheader>
		<SPanel :cname="$style.panel" title="男频">
			<ul>
				<router-link tag="li" v-for="(item,index) in male" :key="index" :class="$style.listItem" :to="{name:'bookList'}">
					<span>{{item.major}}</span>
				</router-link>
			</ul>
		</SPanel>
		<SPanel :cname="$style.panel" title="女频">
			<ul>
				<router-link tag="li" v-for="(item,index) in female" :key="index" :class="$style.listItem" :to="{name:'bookList'}">
					<span>{{item.major}}</span>
				</router-link>
			</ul>
		</SPanel>
		<SPanel :cname="$style.panel" title="漫画">
			<ul>
				<router-link tag="li" v-for="(item,index) in picture" :key="index" :class="$style.listItem" :to="{name:'bookList'}">
					<span>{{item.major}}</span>
				</router-link>
			</ul>
		</SPanel>
		<SPanel :cname="$style.panel" title="出版">
			<ul>
				<router-link tag="li" v-for="(item,index) in press" :key="index" :class="$style.listItem" :to="{name:'bookList'}">
					<span>{{item.major}}</span>
				</router-link>
			</ul>
		</SPanel>
	</section>
</template>
<script>
	import Stheader from '../public/header';
	import SPanel from '../core/panel';
	export default {
		name: "sort",
		data() {
			return {
			}
		},
		components: {
			Stheader,
			SPanel
		},
		computed: {
			press() {
				return this.$store.state.all_cates.press;
			},
			picture() {
				return this.$store.state.all_cates.picture;
			},
			female() {
				return this.$store.state.all_cates.female;
			},
			male() {
				return this.$store.state.all_cates.male;
			}
		},
		mounted() {
			
		}
	}
</script>
<style lang="scss" module>
	.sortContent {
		position: relative;
		.header {
			position: fixed;
			top: 0;
			background-color: #fff;
		}
		.panel {
			margin-top: 100px;
			padding: 32px;
			background-color: #f5f5f5;
			>span {
				display: inline-block;
				width: 100%;
				height: 120px;
				font-size: 42px;
				color: #fff;
				background: url(http://img.1391.com/api/v1/bookcenter/cover/1/1228859/1228859_fac7917a960547eb953edf0b740cef3a.jpg/) no-repeat;
				background-size:cover;
			}
			ul {
				display: flex;
				flex-wrap: wrap;
				.listItem {
					display: inline;
					width: 150px;
					line-height: 80px;
					margin: 10px;
					text-align: center;
					background-color: #fff;
					border-radius: 6px;
					font-size: 30px;
				}
			}
		}
		.panel:nth-child(3)>span {
			background: url(http://img.1391.com/api/v1/bookcenter/cover/1/2207688/2207688_69a480b0c8924f16be9bf1b1a880ecc0.jpg/) no-repeat;
			background-size:cover;
		}
		.panel:nth-child(4)>span {
			background: url(http://img.1391.com/api/v1/bookcenter/cover/1/194607/194607_9d65f8ad606b44afb18793c1de6ed735.jpg/) no-repeat;
			background-size:cover;
		}
		.panel:nth-child(5)>span {
			background: url(http://img.1391.com/api/v1/bookcenter/cover/1/53598/53598_69646d00b6ba4c42b47a88c0570e4a88.jpg/) no-repeat;
			background-size:cover;
		}
	}
</style>